<!DOCTYPE html>
<style>
body {
  zoom: 2;
}

textarea {
  box-sizing: border-box;
  width: 200px;
  height: 200px;
  min-width: 100px;
  min-height: 100px;
}
</style>
<body>
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>

<textarea id="textInputID">
Some text
</textarea>

<script>
var zoomFactor = 2;

function drag(startX, startY, destX, destY, callback) {
  chrome.gpuBenchmarking.pointerActionSequence([{source: 'mouse', actions:[
    {name: 'pointerDown', x: startX * zoomFactor, y: startY * zoomFactor},
    {name: 'pointerMove', x: destX * zoomFactor, y: destY * zoomFactor},
    {name: 'pointerUp'}]}],
    callback);
}

var t = async_test('Test for resizing the TEXTAREA below the minimum size set in zoomed environment.');
t.step(() => {
  assert_own_property(window, 'chrome');
  assert_own_property(chrome, 'gpuBenchmarking');

  var textArea = document.getElementById('textInputID');
  var startX = textArea.offsetLeft + 195;
  var startY = textArea.offsetTop + 195;
  drag(startX, startY, startX - 150, startY - 150, t.step_func_done(() => {
    assert_equals(textArea.style.width, '100px');
    assert_equals(textArea.style.height, '100px');
  }));
});
</script>
</body>
